<template>
  <!-- 行情中心的数据 -->
  <div class="view-page">
    <module-header></module-header>
    <div class="market-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane name="fav">
          <span slot="label" stretch="true" class="tab-box">
            <i class="iconfont icon-xing"></i> 自选
          </span>
          <!-- 自选的表格数据 -->
          <el-table
            :data="dataList"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            v-loading="loading"
          >
            <el-table-column label="交易对" sortable width="130px" sort-by="row">
              <template slot-scope="scope">
                <i class="iconfont icon-xingxing market-favor" @click="favorClick($event)"></i>
                <span>{{scope.row.PairBefo}}/{{scope.row.PairBase}}</span>
              </template>
            </el-table-column>
            <el-table-column label="最新价" sortable sort-by="NewPrice" width="190px">
              <template slot-scope="scope">
                {{scope.row.NewPrice}}
                <span class="price-column">￥{{scope.row.NewRmb}}</span>
              </template>
            </el-table-column>
            <el-table-column label="24H涨跌幅" sortable sort-by="Increase" width="120px" align="right">
              <template slot-scope="scope">
                <span
                  :class="scope.row.Increase*1>=0?'dp-green-text':'dp-red-text'"
                >{{scope.row.Increase}}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="DayLow" label="24H最低" sortable width="150px" align="right"></el-table-column>
            <el-table-column prop="DayHigh" label="24H最高" sortable width="150px" align="right"></el-table-column>
            <el-table-column prop="DayCount" label="24H成交量" sortable width="150px" align="right"></el-table-column>
            <el-table-column prop="pairid" label="数据图" width="130px" align="right">
              <template slot-scope="scope">
                <span
                  class="charts_line"
                  :id="'market_fav'+scope.$index+1"
                >{{createLine('market_fav'+scope.$index+1)}}{{scope.row.Charts.toString()}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" :formatter="formatter" width="160px" align="right">
              <router-link to>k线</router-link>
              <router-link to>交易</router-link>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="usdt">
          <span slot="label" class="tab-box">USDT</span>
          <!-- usdt行情的数据 -->
          <el-table
            :data="dataList"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            v-loading="loading"
          >
            <el-table-column label="交易对" sortable width="130px" sort-by="row">
              <template slot-scope="scope">
                <i class="iconfont icon-xing market-favor" @click="favorClick($event)"></i>
                <span>{{scope.row.PairBefo}}/{{scope.row.PairBase}}</span>
              </template>
            </el-table-column>
            <el-table-column label="最新价" sortable sort-by="NewPrice" width="190px">
              <template slot-scope="scope">
                {{scope.row.NewPrice}}
                <span class="price-column">￥{{scope.row.NewRmb}}</span>
              </template>
            </el-table-column>
            <el-table-column label="24H涨跌幅" sortable sort-by="Increase" width="120px" align="right">
              <template slot-scope="scope">
                <span
                  :class="scope.row.Increase*1>=0?'dp-green-text':'dp-red-text'"
                >{{scope.row.Increase}}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="DayLow" label="24H最低" sortable width="150px" align="right"></el-table-column>
            <el-table-column prop="DayHigh" label="24H最高" sortable width="150px" align="right"></el-table-column>
            <el-table-column prop="DayCount" label="24H成交量" sortable width="150px" align="right"></el-table-column>
            <el-table-column prop="pairid" label="数据图" width="130px" align="right">
              <template slot-scope="scope">
                <span
                  class="charts_line"
                  :id="'market_uadt'+scope.$index+1"
                >{{createLine('market_uadt'+scope.$index+1)}}{{scope.row.Charts.toString()}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" :formatter="formatter" width="160px" align="right">
              <router-link to>k线</router-link>
              <router-link to>交易</router-link>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="dpcoin">
          <span slot="label" class="tab-box">DPCOIN</span>
          <!-- DPCOIN 行情的数据 -->
          <el-table
            :data="dataList"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            v-loading="loading"
          >
            <el-table-column label="交易对" sortable width="130px" sort-by="row">
              <template slot-scope="scope">
                <i class="iconfont icon-xing market-favor" @click="favorClick($event)"></i>
                <span>{{scope.row.PairBefo}}/{{scope.row.PairBase}}</span>
              </template>
            </el-table-column>
            <el-table-column label="最新价" sortable sort-by="NewPrice" width="190px">
              <template slot-scope="scope">
                {{scope.row.NewPrice}}
                <span class="price-column">￥{{scope.row.NewRmb}}</span>
              </template>
            </el-table-column>
            <el-table-column label="24H涨跌幅" sortable sort-by="Increase" width="120px" align="right">
              <template slot-scope="scope">
                <span
                  :class="scope.row.Increase*1>=0?'dp-green-text':'dp-red-text'"
                >{{scope.row.Increase}}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="DayLow" label="24H最低" sortable width="150px" align="right"></el-table-column>
            <el-table-column prop="DayHigh" label="24H最高" sortable width="150px" align="right"></el-table-column>
            <el-table-column prop="DayCount" label="24H成交量" sortable width="150px" align="right"></el-table-column>
            <el-table-column prop="pairid" label="数据图" width="130px" align="right">
              <template slot-scope="scope">
                <span
                  class="charts_line"
                  :id="'market_dpcoin'+scope.$index+1"
                >{{createLine('market_dpcoin'+scope.$index+1)}}{{scope.row.Charts.toString()}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" :formatter="formatter" width="160px" align="right">
              <router-link to>k线</router-link>
              <router-link to>交易</router-link>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="crypto">
          <span slot="label" class="tab-box">CRYPTO</span>
          <!-- CRYPTO 行情的数据 -->
          <el-table
            :data="dataList"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            v-loading="loading"
          >
            <el-table-column label="交易对" sortable width="130px" sort-by="row">
              <template slot-scope="scope">
                <i class="iconfont icon-xing market-favor" @click="favorClick($event)"></i>
                <span>{{scope.row.PairBefo}}/{{scope.row.PairBase}}</span>
              </template>
            </el-table-column>
            <el-table-column label="最新价" sortable sort-by="NewPrice" width="190px">
              <template slot-scope="scope">
                {{scope.row.NewPrice}}
                <span class="price-column">￥{{scope.row.NewRmb}}</span>
              </template>
            </el-table-column>
            <el-table-column label="24H涨跌幅" sortable sort-by="Increase" width="120px" align="right">
              <template slot-scope="scope">
                <span
                  :class="scope.row.Increase*1>=0?'dp-green-text':'dp-red-text'"
                >{{scope.row.Increase}}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="DayLow" label="24H最低" sortable width="150px" align="right"></el-table-column>
            <el-table-column prop="DayHigh" label="24H最高" sortable width="150px" align="right"></el-table-column>
            <el-table-column prop="DayCount" label="24H成交量" sortable width="150px" align="right"></el-table-column>
            <el-table-column prop="pairid" label="数据图" width="130px" align="right">
              <template slot-scope="scope">
                <span
                  class="charts_line"
                  :id="'market_crypto'+scope.$index+1"
                >{{createLine('market_crypto'+scope.$index+1)}}{{scope.row.Charts.toString()}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" :formatter="formatter" width="160px" align="right">
              <router-link to>k线</router-link>
              <router-link to>交易</router-link>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="contract">
          <span slot="label" class="tab-box">合约</span>
          <!-- 合约 行情的数据 -->
          <el-table
            :data="dataList"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            v-loading="loading"
          >
            <el-table-column label="交易对" sortable width="130px" sort-by="row">
              <template slot-scope="scope">
                <i class="iconfont icon-xing market-favor" @click="favorClick($event)"></i>
                <span>{{scope.row.PairBefo}}/{{scope.row.PairBase}}</span>
              </template>
            </el-table-column>
            <el-table-column label="最新价" sortable sort-by="NewPrice" width="190px">
              <template slot-scope="scope">
                {{scope.row.NewPrice}}
                <span class="price-column">￥{{scope.row.NewRmb}}</span>
              </template>
            </el-table-column>
            <el-table-column label="24H涨跌幅" sortable sort-by="Increase" width="120px" align="right">
              <template slot-scope="scope">
                <span
                  :class="scope.row.Increase*1>=0?'dp-green-text':'dp-red-text'"
                >{{scope.row.Increase}}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="DayLow" label="24H最低" sortable width="150px" align="right"></el-table-column>
            <el-table-column prop="DayHigh" label="24H最高" sortable width="150px" align="right"></el-table-column>
            <el-table-column prop="DayCount" label="24H成交量" sortable width="150px" align="right"></el-table-column>
            <el-table-column prop="pairid" label="数据图" width="130px" align="right">
              <template slot-scope="scope">
                <span
                  class="charts_line"
                  :id="'market_contract'+scope.$index+1"
                >{{createLine('market_contract'+scope.$index+1)}}{{scope.row.Charts.toString()}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" :formatter="formatter" width="160px" align="right">
              <router-link to>k线</router-link>
              <router-link to>交易</router-link>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="exponent">
          <span slot="label" class="tab-box">指数</span>
          <!-- 指数 行情的数据 -->
          <div class="exponent-box">
            <p class="exponent-title">价格指数</p>

            <div class="flx-box">
              <div class="card" v-for="(item,index) in exponent.ExponentPrice" :key="index">
                <div class="info-box">
                  <p class="card-title">
                    <span class="pair-name">{{item.PairBefo}}/{{item.PairBase}}</span>
                    <span
                      class="increase"
                      :class="item.Increase>=0?'dp-green-bgc':'dp-red-bgc'"
                    >{{item.Increase}}%</span>
                  </p>
                  <p
                    class="card-price"
                    :class="item.Increase>=0?'dp-green-text':'dp-red-text'"
                  >￥{{item.NewRmb}}</p>
                  <p class="card-text">24最低 {{item.DayHeigh}}</p>
                  <p class="card-text">24最高 {{item.DayLow}}</p>
                </div>

                <div class="charts-box">
                  <div
                    class="charts"
                    :id="'exponent_price_'+index"
                  >{{createExporentLine('exponent_price_'+index)}}{{item.Charts.toString()}}</div>
                </div>
              </div>
            </div>
            <p class="exponent-title">USDT指数</p>

            <div class="flx-box">
              <div class="card" v-for="(item,index) in exponent.ExponentUSDT" :key="index">
                <div class="info-box">
                  <p class="card-title">
                    <span class="pair-name">{{item.PairBefo}}/{{item.PairBase}}</span>
                    <span
                      class="increase"
                      :class="item.Increase>=0?'dp-green-bgc':'dp-red-bgc'"
                    >{{item.Increase}}%</span>
                  </p>
                  <p
                    class="card-price"
                    :class="item.Increase>=0?'dp-green-text':'dp-red-text'"
                  >￥{{item.NewRmb}}</p>
                  <p class="card-text">24最低 {{item.DayHeigh}}</p>
                  <p class="card-text">24最高 {{item.DayLow}}</p>
                </div>
                <div class="charts-box">
                  <div
                    class="charts"
                    :id="'exponent_usdt_'+index"
                  >{{createExporentLine('exponent_usdt_'+index)}}{{item.Charts.toString()}}</div>
                </div>
              </div>
            </div>
            <p class="exponent-title">BTC指数</p>

            <div class="flx-box">
              <div class="card" v-for="(item,index) in exponent.ExponentBTC" :key="index">
                <div class="info-box">
                  <p class="card-title">
                    <span class="pair-name">{{item.PairBefo}}/{{item.PairBase}}</span>
                    <span
                      class="increase"
                      :class="item.Increase>=0?'dp-green-bgc':'dp-red-bgc'"
                    >{{item.Increase}}%</span>
                  </p>
                  <p
                    class="card-price"
                    :class="item.Increase>=0?'dp-green-text':'dp-red-text'"
                  >￥{{item.NewRmb}}</p>
                  <p class="card-text">24最低 {{item.DayHeigh}}</p>
                  <p class="card-text">24最高 {{item.DayLow}}</p>
                </div>
                <div class="charts-box">
                  <div
                    class="charts"
                    :id="'exponent_btc_'+index"
                  >{{createExporentLine('exponent_btc_'+index)}}{{item.Charts.toString()}}</div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <module-footer></module-footer>
  </div>
</template>
<script>
import ModuleHeader from "../page-module-public/public-header.vue";
import ModuleFooter from "../page-module-public/public-footer.vue";
export default {
  data() {
    return {
      dataList: [],
      exponent: {},
      activeName: "usdt",
      loading: false
    };
  },
  components: {
    ModuleHeader,
    ModuleFooter
  },

  methods: {
    /*
     *标签页的切换
     */
    handleClick(tab, event) {
      console.log("点击的参数", this.activeName);
      switch (this.activeName) {
        case "fav":
          this.reqFavorites();
          break;
        case "usdt":
          this.reqMarketList();
          break;
        case "dpcoin":
          this.reqMarketList();
          break;
        case "crypto":
          this.reqMarketList();
          break;
        case "contract":
          this.reqMarketList();
          break;
        case "exponent":
          this.reqExponent();
          break;
        default:
          this.reqMarketList();
          break;
      }
      this.$router.push({ path: "/market/" + this.activeName });
    },
    /*
     *api-自选请求
     */
    reqFavorites() {
      let param = [];
      this.$api.cec.favorites(param).then(res => {
        if (res.data.code == 200) {
          this.dataList = res.data.data.MarketList;
          console.log("自选返回数据", res.data.data.MarketList);
        } else {
          this.dataList = [];
        }
      });
    },
    /*
     *api-行情请求
     */
    reqMarketList() {
      let param = {
        data: this.activeName
      };
      this.$api.cec.marketList(param).then(res => {
        if (res.data.code == 200) {
          this.dataList = res.data.data;
          console.log("行情返回数据", res.data.data);
        } else {
          this.dataList = [];
        }
      });
    },
    /*
     *api-指数请求
     */
    reqExponent() {
      let param = {
        ExponentType: this.activeName
      };
      this.$api.cec.exponent(param).then(res => {
        if (res.data.code == 200) {
          this.exponent = res.data.data.Exponent;
          console.log("指数返回数据", res.data.data.Exponent);
        } else {
          this.exponent = [];
        }
      });
    },
    /*
     * @description 表格列表点击函数
     * @param row，column
     */
    formatter(row, column) {
      return row.address;
    },
    /*
     * 图表创建
     */
    createLine(e) {
      setTimeout(() => {
        $("#" + e).peity("line", { width: 80 });
      }, 300);
    },
    /*
     * 点击自选的事件
     * 这是一个有点稍微过分的做法
     * 通过dom修改class实现
     */
    favorClick(e) {
      let classAtr = e.target.getAttribute("class");
      if (classAtr.indexOf(" icon-xing ") != -1) {
        let newClass = classAtr.replace("icon-xing", "icon-xingxing");
        e.target.setAttribute("class", newClass);
      } else if (classAtr.indexOf(" icon-xingxing ") != -1) {
        let newClass = classAtr.replace("icon-xingxing", "icon-xing");
        e.target.setAttribute("class", newClass);
      }
    },
    /*
     * @description 图表的绘制
     */
    createExporentLine(e) {
      $("#" + e).peity("line", {
        width: 196,
        height: 70,
        fill: "#f9f9f9",
        stroke: "#e9e9e9"
      });
    }
  },

  computed: {},

  created() {
    this.activeName = this.$route.params.tag || "usdt";
    switch (this.activeName) {
      case "fav":
        this.reqFavorites();
        break;
      case "usdt":
        this.reqMarketList();
        break;
      case "dpcoin":
        this.reqMarketList();
        break;
      case "crypto":
        this.reqMarketList();
        break;
      case "contract":
        this.reqMarketList();
        break;
      case "exponent":
        this.reqExponent();
        break;
      default:
        this.reqMarketList();
        break;
    }
  },

  mounted() {}
};
</script>
<style lang="less" scoped>
.b {
  outline: solid 1px red;
}
.view-page {
  width: 100%;
  .market-box {
    width: 1180px;
    margin: 0 auto;
    padding: 30px 0 50px 0;
    /*
    * 通用样式
    */
    .icon-xingxing {
      color: #5795f1;
    }
    .icon-xing {
      color: #c0cbdf;
    }
    .tab-box {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.65);
      display: inline-block;
      text-align: center;
      width: 70px;
    }
    .market-favor {
      margin-right: 8px;
      width: 14px;
      height: 14px;
      display: inline-block;

      font-size: 16px;
      cursor: pointer;
    }
    .price-column {
      color: #9aa8b7;
      font-size: 12px;
    }
    .cell .router-link-active {
      color: #5795f1;
      margin-left: 20px;
    }
    .charts_line {
      display: none;
    }
    .exponent-box {
      padding: 10px 0;
      .exponent-title {
        height: 36px;
        font-size: 16px;
        font-weight: 500;
        line-height: 36px;
        color: rgba(0, 0, 0, 0.85);
      }
      .flx-box {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        .card {
          width: 216px;
          height: 143px;
          border-radius: 4px;
          background-color: #fff;
          box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
          margin-right: 20px;
          margin-bottom: 30px;
          padding: 12px 0 0 20px;
          position: relative;
          cursor: pointer;
          overflow: hidden;
          .info-box {
            z-index: 1;
            position: relative;
            .card-title {
              font-size: 18px;
              line-height: 25px;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.85);
            }
            .increase {
              font-size: 12px;
              line-height: 18px;
              display: inline-block;
              color: #fff;
              width: 53px;
              border-radius: 4px;
              min-width: 53px;
              position: relative;
              vertical-align: middle;
              margin: 0 0 3px 16px;
              text-align: center;
            }
            .card-price {
              padding: 10px 0;
              font-size: 20px;
            }
            .card-text {
              color: rgba(0, 0, 0, 0.43);
              font-size: 12px;
              margin: 3px 0;
            }
          }
          .charts {
            display: none;
          }
          .charts-box {
            position: absolute;
            bottom: -5px;
            z-index: 0;
          }
        }
        .card:hover {
          box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
          transform: translateY(-5px);
          transition: all 0.2s linear;
        }
      }
    }
  }
}
</style>
